<template>
  <div>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :disabled="disabled"
    >
      <van-sticky :offset-top="1">
        <header id="header" class="aui-bar aui-bar-nav">
          <a class="aui-pull-left" @click="back">
            <span class="iconfont icon-fanhui"></span>
          </a>
          <div class="aui-title">试用记录</div>
          <a class="aui-pull-right" @click="fnState"> 筛选 </a>
        </header>
      </van-sticky>
      <div class="sy_record">
        <van-row class="tab aui-bg-f aui-margin-b-10">
          <van-col
            span="6"
            class="
              aui-text-center aui-ftn12
              list
              aui-border-r aui-border-b aui-padded-t-10 aui-padded-b-10
            "
            v-for="(item, index) in tab_items"
            :key="index"
            @click="fnSelectItem(index, item.status)"
            :class="{ active: cur == index }"
          >
            <span>{{ item.num }}</span>
            <br />
            <span class="aui-padded-t-5">{{ item.name }}</span>
          </van-col>
        </van-row>
        <div class="vipts">
          <div class="item">
            <span class="title">超级福利：</span>
            获得试用资格并提交预览资料后，需要商家审图
          </div>
          <div class="item">
            <span class="title">其他试用：</span>
            获得试用资格并提交预览资料后，不需要商家审图，可直接下单填写单号
          </div>
        </div>
        <div class="content">
          <div
            class="
              aui-text-right
              aui-text-7
              aui-ftn12
              aui-bg-f
              aui-padded-10
              aui-border-b
              check
            "
            v-if="cur == 0 && !search.title && !search.ordernum"
            v-cloak
          >
            <van-checkbox shape="square" v-model="check" @change="fnLookSy"
              >只看试用中的</van-checkbox
            >
          </div>
          <record ref="myrecord" :index="cur"></record>
        </div>
      </div>
      <selectRecord
        ref="myselectrecord"
        :is_show="is_show"
        @change="fnChange"
        @confirm="fnConfrim"
      ></selectRecord>
    </van-pull-refresh>
    
  </div>
</template>

<script>
import record from "./components/record.vue";
import selectRecord from "./components/select_record.vue";
import Record from "../../service/record.js";
export default {
  name: "User",
  data() {
    return {
      is_show: false,
      search: {
        title: "",
        ordernum: "",
        index: 0,
      },
      type_id: "",
      check: false,
      cur: 0,
      tab_items: [],
      disabled: false,
      refreshing: false,
    };
  },
  components: {
    record,
    selectRecord,
  },
  computed: {
    key() {
      return this.$route.path + Math.random();
    },
  },
  mounted() {
    this.init();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    init() {
      this.initTabItems();
    },
    
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
        this.init();
      }, 1000);
    },
    initTabItems: function () {
      Record.fnGetSyTabNew({
        uid: this.$store.state.uid,
        isToken: true,
        isLoading: true,
      }).then((res) => {
        if (res && res.status) {
          this.tab_items = res.data;
          const index = this.tab_items.findIndex(item => item.status == this.$route.query.status);
          this.cur = index != -1 ? index : 0;
          this.fnSelectItem(this.cur, this.tab_items[this.cur].status);
        }
      });
    },
    fnState: function () {
      this.is_show = true;
    },
    // 接收子组件的方法消息
    fnChange: function (val) {
      this.is_show = false;
    },
    fnConfrim: function (val) {
      this.is_show = false;
      this.search = {
        title: val.search.title,
        ordernum: val.search.ordernum ? val.search.ordernum : "",
      };
      this.fnChangeItem(val.search.index, this.type_id);
    },
    fnSelectItem: function (index, status) {
      this.search = {
        title: "",
        ordernum: "",
      };
      this.$refs.myselectrecord.fnClearData();
      this.search.index = index;
      this.fnSelectData(index, status, "", "");
    },
    // 筛选功能
    fnSelectData: function (index, status, title, order_num) {
      this.search = {
        title: title,
        ordernum: order_num,
      };
      // 筛选api
      this.fnChangeItem(index, status);
    },
    fnChangeItem: function (index, status) {
      this.type_id = status;
      this.cur = index;
      this.$refs.myrecord.fnClearData(this.type_id, this.check, this.search);
    },
    fnLookSy: function () {
      // 父组件操作子组件的方法
      this.$refs.myrecord.fnClearData(this.type_id, this.check, this.search);
    },
  },
};
</script>

<style lang="scss" scoped>
div.sy_record div.tab {
  color: #666;
}
div.sy_record .active {
  color: var(--pink);
}
div.check {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.vipts {
  background-color: #fff8ea;
  font-size: 12px;
  padding: 10px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 5px;
  color: #666;
  line-height: 20px;
  .item {
    .title {
      color: var(--pink);
      flex: 2;
    }
    .txt {
      flex: 5;
    }
  }
}
</style>
